<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Mootools Drop Menu</title>

<link  href="style.css" rel="stylesheet" type="text/css" media="screen" />

<script src="mootools-1.2.3-core.js" type="text/javascript"></script>
<script src="nestedSortables.js" type="text/javascript"></script>

<script type="text/javascript">
<!-- 

window.addEvent('domready',function(){

	sortIt = new Nested('nav', {
		onStart: function(el) {
			el.addClass('drag');
		},
		onComplete: function(el) {
			el.removeClass('drag');
		}
	});

});

// -->	
</script>

<style type="text/css">

.drag {
	background: #AAA;
}

</style>

</head>
<body>

<h1>Mootools Drop Menu</h1>

<p>
	This is a simple yet powerful drop menu class. You can create an unlimited nested menu, 
	build by the HTML tags <code>ul</code> and <code>li</code>. You can define your functions
	to open and close the menus with the <code>onOpen</code> and <code>onClose</code> Events.
	This gives you great power in customizing your drop down menu. You can customize the menu
	even more by CSS. The class is origionally written by 
	<a href="http://www.chrisesler.com/mootools/1.2/dropMenu.html">Crhis Esler</a>	but almost 
	totally rewritten.
</p>

<h2>Demo</h2>

<div id="nav_wrapper" style="height: 30px;">
<ul id="nav">
  <li>Blog</li>
  <li>Projects +
    <ul>
      <li>Websites +
        <ul>
          <li>Website 1</li>

          <li>Website 2</li>
          <li>Website 3</li>
          <li>Website 4</li>
        </ul>
      </li>
      <li>Website design</li>
      <li>Javascript</li>

    </ul>
  </li>
  <li>Learn +
    <ul>
      <li>Javascript +
        <ul>
          <li>Mootools +
				<ul>
					<li>Official +
							<ul>
					          <li>Github Core</li>

					          <li>Github More</li>
					          <li>Lighthouse</li>
					          <li>Mootorial</li>
					          <li>Mootools Blog +
								  <ul>
							          <li>sub</li>

							          <li>sub</li>
							          <li>sub</li>
							          <li>sub +
									  	<ul>
								          <li>sub sub</li>
								          <li>sub sub</li>
								          <li>sub sub</li>
								        </ul>
									  </li>
							       </ul>
							  </li>
					        </ul>
						</li>

		          <li>eSteak.net</li>
		          <li>Mooforum.net</li>
		          <li>DavidWalsh.name</li>
		        </ul>
			</li>

          <li>jQuery</li>
          <li>Quirksmode.org</li>
          <li>Ajaxian</li>
          <li>W3School</li>
        </ul>
      </li>
      <li>CSS +

        <ul>
          <li>W3Scool</li>
          <li>Ajaxian</li>
          <li>A List Apart</li>
        </ul>
      </li>
    </ul>

  </li>
  <li>Info</li>
  <li>Contact</li>
</ul>
</div>


<h2>Example Code</h2>

<pre>
<strong>Javascript</strong>	
window.addEvent('domready',function(){
	
	$('nav').dropMenu();
	
});
</pre>

<pre>
<strong>HTML</strong>
&lt;ul&gt;
	&lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;
		&lt;a href="#"&gt;Blog&lt;/a&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;a href="#"&gt;Archive&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;
				&lt;a href="#"&gt;Categories&lt;/a&gt;
				&lt;ul&gt;
					&lt;li&gt;&lt;a href="#"&gt;Javascript&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Mootools&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;PHP&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/li&gt;
			&lt;li&gt;&lt;a href="#"&gt;Last comment&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>

<h3>A more advanced example</h3>

<pre>
<strong>Javascript</strong>	
$('nav').dropMenu({
	onOpen: function(el){
		el.fade('in')
	},
	onClose: function(el){
		el.fade('out');
	},
	onInitialize: function(el){
		el.fade('hide').set('tween',{duration:1000});
	}
});
</pre>

<h3>Use the <code>Awf.DropMenu</code> class</h3>
<pre>
<strong>Javascript</strong>	
var dropMenu = new Awf.DropMenu($('nav'),{
	onOpen: function(el){
		el.fade('in')
	},
	onClose: function(el){
		el.fade('out');
	},
	onInitialize: function(el){
		el.fade('hide').set('tween',{duration:1000});
	}
});
</pre>

<h2>Documentation: Awf.DropMenu</h2>

<h3>Syntax:</h3>

<pre>var dropMenu = new Awf.DropMenu(element, [options]);</pre>

<h3>Arguments:</h3>

<ol>
	<li>element - (mixed) An Element or the string id of an Element to apply the drop menu to.</li>
	<li>options - (object,optional) An object with options for the drop menu. See below</li>
</ol>

<h3>Options:</h3>

<ul>
	<li>mouseoutDelay - (number: defaults to 200) The time (delay) before the onClose event get fired</li>
</ul>

<h3>Events:</h3>

<ul>
	<li>open - (function) The function which opens a part of the menu</li>
	<li>close - (function) The function which close a menu</li>
	<li>initialize - (function) The function which to execute when the menu part (&lt;ul&gt;) get initialized</li>
</ul>

<h2>Native Element Method: dropMenu</h2>

<h3>Syntax:</h3>
<pre>$('myElement').dropMenu[options]);</pre>

<h3>Arguments:</h3>

<ol>
	<li>options - (object,optional) An object with options for the drop menu. See the Awf.DropMenu options</li>
</ol>

<h3>Returns:</h3>
<ul>
	<li>(object) This Element.</li>
</ul>


<h2>Download &amp; links</h2>

<ul>
	<li>Download the full uncompressed <a href="Awf.dropMenu.js">Awf.dropMenu.js</a> (2.6 kB)</li>
	<li>Download css <a href="Awf.dropMenu.js">dropMenu.css</a> (&lt; 1 kB)</li>
	<li>Download the minified <a href="Awf.dropMenu-min.js">Awf.dropMenu-min.js</a> ( 1.1 kB )</li>
	<li>Follow the discussion at <a href="http://www.mooforum.net/scripts12/mootools-dropmenu-t2032.html">Mooforum.net</a></li>
	<li>Download at <a href="http://www.esteak.net/plugin/Mootools_DropMenu">eSteak.net</a></li>
</ul>

<h2>Dependencies</h2>
<ul>
	<li>
		Mootools
		<ul>
			<li>Element.Style</li>
			<li>Element.Event</li>
			<li>Class.Extras</li>
		</ul>
	</li>
</ul>

<h2>License</h2>
<p>
	MIT-style license.
</p>

<h2>Created By</h2>
<p>
	<a href="http://www.aryweb.nl">Aryweb Webdevelopment</a>
</p>


</body>
</html>
